<!--
 * @Author: 王灿
 * @Date: 2019-11-10 11:08:08
 * @LastEditTime: 2020-03-09 08:26:36
 * @Description: 商品礼包管理
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\index.vue
 -->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow" @onChangeName="onChangeName"/>
    <!-- 商品列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 商品名称 -->
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <!-- 商品介绍 -->
        <el-table-column label="商品介绍">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.introduce" />
          </template>
        </el-table-column>
        <!-- 标价 -->
        <el-table-column prop="markPrice" label="标价">
          <template slot-scope="scope">
            <span>{{ scope.row.markPrice || '--'}}</span>
          </template>
        </el-table-column>
        <!-- 实际价格 -->
        <el-table-column prop="actualPrice" label="实际价格" />
         <!-- 销量 -->
        <el-table-column prop="sales" label="销量" />
        <!-- 库存 -->
        <el-table-column prop="stock" label="库存" />
        <!-- 状态 -->
        <el-table-column prop="upperShelfFlag" label="状态">
          <template slot-scope="scope">
            <span
              class="public-table__status"
              :class="[scope.row.upperShelfFlag === 0 ? '' : 'active']"
            ></span>
            <span>{{ scope.row.upperShelfFlag === 0 ? '下架' : '上架'}}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="180" label="操作">
          <template slot-scope="scope">
            <el-button @click="onEdit(scope.row)" type="text" size="small">编辑</el-button>
            <!--<el-button @click="onChangeMark(scope.row)" type="text" size="small">标签</el-button>
            <el-button @click="onChangeSku(scope.row)" type="text" size="small">sku</el-button>-->
            <el-button @click="onChangeParam(scope.row)" type="text" size="small">参数</el-button>
            <el-button
              type="text"
              size="small"
              :class="scope.row.upperShelfFlag === 1 ? 'active' : ''"
              @click="onChangeStatus(scope.row)"
            >{{ scope.row.upperShelfFlag === 0 ? '上架' : '下架' }}</el-button>
            <!-- <el-button v-if="scope.row.collectionFlag === 0" @click="onCollection(scope.row.id)" type="text" size="small">收藏</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 抽屉 -->
    <el-drawer
      :title="tabTitle"
      :visible.sync="isShow"
      :wrapperClosable="false"
      :destroyOnClose="true"
      :show-close="show"
      direction="rtl"
      @open="onOpen"
      @close="onClose"
      @opened="onOpened"
      @closed="onClosed"
      size="80%"
      height="90%"
      ref="drawer"
    >
      <!-- 商品详情 -->
      <commodity-details
        v-if="!isSkuShow"
        :row="tabRow"
        :commodityType="commodityType"
        @onCancelBtn="onCancelBtn"
      />
      <!-- 绑定Sku -->
      <commodity-sku v-else :productId="productId" :commodityName="commodityName" />
    </el-drawer>

    <!-- 绑定标签/删除 -->
    <el-dialog title="商品标签" :visible.sync="isMarkShow" :close-on-click-modal="false" width="600px">
      <commodity-mark
        @onChangeMarkParent="onChangeMarkParent"
        :row="markRow"
        :productId="productId"
      />
    </el-dialog>

    <!-- 商品参数 -->
    <el-dialog title="商品参数" :visible.sync="isCommodityParam" :close-on-click-modal="false" width="600px">
      <commodity-param
        @onChangeMarkParent="onChangeMarkParent"
        :row="paramRow"
        :productId="productId"
      />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import CommodityDetails from './gift-details/index.vue'
import CommodityMark from './../commodity-mark/index.vue'
import CommoditySku from './../commodity-sku/index.vue'
import CommodityParam from './../commodity-param/index.vue'
import { getProductList, getGiftPackageList, getUpdateUpperShelf, getCollectionAdd } from '@/api/commodity.js'
import { getByType } from '@/api/configure.js'
import { storageSetItem, storageGetItem } from '@/utils/index.js'
export default {
  name: 'CommodityManagement',
  components: {
    JqTitle,
    JqTooltip,
    JqPage,
    CommodityDetails,
    CommodityMark,
    CommoditySku,
    CommodityParam
  },
  data() {
    return {
      title: { label: '礼包配置', flag: true, searchFlag: true },
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      // 抽屉开关
      isShow: false,
      // 抽屉关关闭按钮
      show: false,
      // 标签开关
      isMarkShow: false,
      // sku开关
      isSkuShow: false,
      // 标题
      tabTitle: '新增',
      // row数据
      tabRow: {},
      // row标签数据
      markRow: [],
      // 商品Id
      productId: '',
      // 分页总数
      total: 0,
      // 刷新页面开关
      isRefresh: false,
      // 商品对象
      commodityName: {
        label: '',
        flag: true,
        searchFlag: false
      },
      // 商品类型
      commodityType: [],
      // 商品参数标记
      isCommodityParam: false,
      // 商品参数
      paramRow: {},
      // 搜索
      name: ''
    }
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetGiftPackageList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetGiftPackageList()
    },
    // 监听刷新父组件页面标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetGiftPackageList()
      }
    },
    // 子组件关闭是情况row
    isShow() {
      if (!this.isShow) {
        this.tabRow = {}
      }
    },
    // 监听name搜索
    name() {
      this.pageNum = 1
      this.onGetGiftPackageList()
    }
  },
  created() {
    this.onGetGiftPackageList()
    this.onGetByType()
  },
  methods: {
    // 获取商品类型
    onGetByType() {
      getByType({
        type: 5
      }).then(res => {
        res.data.forEach(item => {
          let params = {}
          params.value = item.propertyName
          params.label = item.propertyValue
          this.commodityType.push(params)
        })
      })
    },
    // 父子组件通讯 -- 新增商品
    onTableRow(data) {
      this.isShow = data.isShow
      this.isCommodityParam = false
      this.tabTitle = '新增'
      this.isRefresh = false
      storageSetItem('propertyData', [])
    },
    // 商品名称模糊搜索
    onChangeName(name) {
      this.name = name
    },
    // 父子组件通讯 --- 新增商品(取消按钮)
    onCancelBtn(data) {
      this.isRefresh = data.isRefresh
      this.$refs.drawer.closeDrawer()
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 商品数据列表
    onGetGiftPackageList() {
      getGiftPackageList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.name
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 打开 -- 动画结束回调
    onOpen() {
      if (this.tabTitle !== '编辑') {
        this.tabRow = {}
      }
    },
    onOpened() {
      this.show = true
    },
    // 关闭 -- 动画结束回调
    onClose() {
      this.show = false
    },
    onClosed() {
      this.show = false
      this.isSkuShow = false
      this.productId = ''
    },
    // 编辑
    onEdit(row) {
      this.tabRow = row
      this.isShow = true
      this.isRefresh = false
      this.tabTitle = '编辑'
      storageSetItem('propertyData', JSON.parse(this.tabRow.propertyValue))
    },
    // 绑定标签/删除
    onChangeMark(row) {
      this.markRow = row.markInfoDTOS
      this.productId = row.id
      this.isMarkShow = true
      this.isRefresh = false
    },
    // 父子组件传值  --- 标签
    onChangeMarkParent(data) {
      this.markRow = []
      this.productId = ''
      this.commodityName.label = ''
      this.isMarkShow = false
      this.isCommodityParam = false
      this.paramRow = {}
      this.isRefresh = data.isRefresh
    },
    // 商品sku
    onChangeSku(row) {
      this.isShow = true
      this.isRefresh = false
      this.isSkuShow = true
      this.tabTitle = '商品Sku'
      this.productId = row.id
      this.commodityName.label = row.name
    },
    // 商品上下架
    onChangeStatus(row) {
      let title =
        row.upperShelfFlag === 1
          ? '此操作会将商品下架, '
          : '此操作会将商品上架, '
      this.$confirm(title + '是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          getUpdateUpperShelf({
            id: row.id
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.data
            })
            this.onGetGiftPackageList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 商品参数  
    onChangeParam(row) {
      this.isCommodityParam = true
      this.paramRow = row.parameter ? JSON.parse(row.parameter) : ''
      this.productId = row.id
      this.isRefresh = false
    },
    // 商品收藏
    onCollection(productId) {
       this.$confirm('收藏该商品，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          getCollectionAdd({
            productId: productId
          }).then(res => {
            this.$message({
              type: 'success',
              message: '已收藏',
              onClose: () => {
                this.$route.push({
                  name: 'commodity-collection'
                })
              }
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.public {
  .public-table__status {
    &.active {
      background: #96b327;
    }
  }
}
</style>
